<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>选择喜欢的</title>
	<style>
		*{
			list-style: none;
		}
		.sty{
			display: flex;
			flex-direction: row;
			width: 100%;
		}
		
	</style>
</head>
<body>
	<div id="app">
		<div>选择你喜欢的专栏</div>
		<div class="ke">
			<ul  class="sty">
				<li v-for="(item,index) in list":key="item.id">
					<input type="checkbox" :value="item" v-model="happy"> 
					{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in happy":key="item.id" >{{item}}</li>
			</ul>
		</div>

	</div>
	<script src="./vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
				list: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
				happy:[]
			}
		})
	</script>
	
</body>
</html>